<template>
    <ul class="ivu-list">
        <li class="ivu-list-item">
            <h3>地址</h3>
            <p class="ivu-description">{{ model.full_name }}</p>
        </li>
        <li class="ivu-list-item">
            <h3>描述</h3>
            <p class="ivu-description">{{ model.description }}</p>
        </li>
        <li class="ivu-list-item">
            <h3>参数</h3>
            <Table :columns="columns" :data="args_data" border></Table>
        </li>
        <li class="ivu-list-item">
            <h3>返回值</h3>
            <p>{{ model.return_description }}</p>
            <h4>示例</h4>
            <div id="description_json" class="ivu-description"></div>
        </li>
    </ul>
</template>

<script>
export default {
    name: "Description",
    props: {
        model: Object
    },
    data() {
        return {
            columns: [
                { title: "名称", key: "name" },
                { title: "类型", key: "type" },
                { title: "描述", key: "description" },
                { title: "级别", render: (h, params) => {
                    return h("Poptip", {
                        props: { 
                            title: "参数级别说明", 
                            content: "MUST_VALID: 必须提供该参数且参数值必须有效\nMUST: 必须提供该参数，如果参数值无效将使用默认值\nFREE: 可选参数，参数值无效将使用默认值" 
                        }
                    }, [
                        h("Button", { props: { size: "small" } }, params.row.level)
                    ]);
                } },
                { title: "默认值", render: (h, params) => {
                    return h("span", JSON.stringify(params.row.default));
                } },
                { title: "示例", render: (h, params) => {
                    return h("span", params.row.examples ? params.row.examples.map( elem => JSON.stringify(elem)).join(",") : JSON.stringify(params.row.example));
                } }
            ]
        };
    },
    computed: {
        args_data() {
            var temp = [];
            for(var key in this.model.args) {
                temp.push(this.model.args[key]);
            }
            return temp;
        }
    },
    methods: {
        renderJson(value) {
            $("#description_json").JSONView(value.return_example, { collapsed: false });
        }
    },
    watch: {
        "model": "renderJson"
    }
}
</script>
